<template>
    <div id="home" class="home">
    </div>
</template>
<script>
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import {
    RGBELoader
} from 'three/examples/jsm/loaders/RGBELoader'
import { Water } from 'three/examples/jsm/objects/Water2'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import SEA from '../assets/img/sea.png'
import SEAHDR from '../assets/hdr/sea_2k.hdr'
import SEAMP4 from '../assets/video/sea.mp4'
import island from '../assets/model/island2.glb'
import normalMap0 from '../assets/img/Water_1_M_Normal.jpg'
import normalMap1 from '../assets/img/Water_2_M_Normal.jpg'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(-50, 50, 130);
scene.add(camera);

const renderer = new THREE.WebGLRenderer(
    {
        // 设置抗锯齿
        antialias: true,
        //   对数深度缓冲区
        logarithmicDepthBuffer: true,
    }
);
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true

const rgbeloader = new RGBELoader()

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

export default {
    data() {
        return {
            controls: null
        }
    },
    mounted() {
        this.windownEvent()
        // this.addBox()
        // this.addHdr()
        this.addShape()
        document.getElementById('home').appendChild(renderer.domElement);
        this.render()
    },
    methods: {
        windownEvent() {
            window.addEventListener('resize', (e) => {
                // 宽高比
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(window.devicePixelRatio);
            })
        },
        render() {
            renderer.render(scene, camera);
            requestAnimationFrame(this.render);
        },
        addBox() {
            const geometry = new THREE.BoxGeometry(10, 10, 10);
            var arr = [SEA]
            var boxMaterial = []
            arr.forEach(item => {
                let textureLoader = new THREE.TextureLoader().load(item)
                boxMaterial.push(new THREE.MeshBasicMaterial({ map: textureLoader }))
            })
            console.log(boxMaterial)
            // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            // const cube = new THREE.Mesh(geometry, material);
            const cube = new THREE.Mesh(geometry, boxMaterial);
            cube.geometry.scale(1, 1, -1)
            scene.add(cube);
        },
        addShape() {
            const shapeGeometry = new THREE.SphereGeometry(1000, 60, 40)
            const material = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load(SEA)
            })
            shapeGeometry.scale(1, 1, -1)
            const sea = new THREE.Mesh(shapeGeometry, material)
            scene.add(sea)
            const video = document.createElement('video')
            video.src = SEAMP4
            video.loop = true
            window.addEventListener('click', e => {
                console.log(video.pause)
                if (video.pause) {
                    video.play()
                    material.map = new THREE.VideoTexture(video)
                    material.map.needsUpdate = true
                }
            })
            rgbeloader.loadAsync(SEAHDR).then((texture) => {
                texture.mapping = THREE.EquirectangularReflectionMapping
                scene.background = texture
                scene.environment = texture
            })
            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(-100, 100, 10);
            scene.add(light);
            // 创建水面
            const waterGeometry = new THREE.CircleBufferGeometry(300, 64)
            const water = new Water(waterGeometry, {
                textureWidth: 1024,
                textureHeight: 1024,
                // color: 0x0080ff,
                color: 0xffffff,
                flowDirection: new THREE.Vector2(1, 1),
                scale: 1,
                // 源码中是：const normalMap0 = options.normalMap0 || textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' );但是three源码并没有这个两个纹理图片。所以可以通过手动给这两个属性赋值。。另一种方式是，直接将这两个图片放在：dist/textures/water目录下，这样源码也能找到这两个图片了。
                normalMap0: new THREE.TextureLoader().load(normalMap0),
                normalMap1: new THREE.TextureLoader().load(normalMap1)
            })
            water.rotation.x = -Math.PI / 2
            water.position.y = 3;
            scene.add(water)
            const gltfLoader = new GLTFLoader()
            const dracoLoader = new DRACOLoader()
            // 该内容存在依赖包  three/examples/jsm/libs/draco文件夹
            dracoLoader.setDecoderPath('static/draco/')
            gltfLoader.setDRACOLoader(dracoLoader)

            gltfLoader.load(island, gltf => {
                scene.add(gltf.scene)
            })
        },
        addHdr() {
            rgbeloader.loadAsync(SEAHDR).then((texture) => {
                texture.mapping = THREE.EquirectangularReflectionMapping
                scene.background = texture
                scene.environment = texture
            })
        },
    }
}
</script>
<style>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#home {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>